import { _decorator, Component, Node, quat } from 'cc';
import { BaseView } from './scripts/libs/rxjs/cc3/BaseView';
import { KeyDown } from './scripts/libs/rxjs/cc3/KeyEvent';
import { KeyCode } from 'cc';
import { Quat } from 'cc';
import { v3 } from 'cc';
import { Vec3 } from 'cc';
import { Slider } from 'cc';
import { BindSlider } from './scripts/libs/rxjs/cc3/BindSlider';
import { EveryFrame, EveryFrameScene, IntervalStartNow } from './scripts/libs/rxjs/cc3/CreatorSchedule';
const { ccclass, property } = _decorator;


const _q0 = quat();
const _q1 = quat();

@ccclass('test')
export class test extends BaseView {


    @property(Node)
    cubeNode: Node = null;

    @property(Node)
    cube1Node: Node = null;

    @property(Slider)
    slider: Slider = null;

    useObserves() {
        return [
            KeyDown().subscribe((_: KeyCode) => {
                if (_ == KeyCode.KEY_A) {
                    this.test_a();
                }
            }),

            BindSlider(this.slider).subscribe(this.sliderRefresh.bind(this))
        ];
    }

    test_a() {
        this.log('test_a');

        // 沿z轴旋转30度，右手定则
        // let _q = Quat.fromAngleZ(quat(), 30);
        // this.cubeNode.rotate(_q);

        // 沿 y 轴旋转30度
        // rotate方式
        // let _q = Quat.fromAxisAngle(quat(), Vec3.UNIT_Y, 30 * Math.PI / 180);
        // this.cubeNode.rotate(_q);

        // get/setRotation方式
        // let _q = this.cubeNode.getRotation();
        // Quat.rotateY(_q, _q, 30 * Math.PI / 180);
        // this.cubeNode.setRotation(_q);


        // 沿y 轴旋转30度，右手定则
        // 基础概念方法
        // 1.首先定义旋转轴
        // let ux = 0;
        // let uy = 1;
        // let uz = 0;
        // // 2.定义旋转弧度
        // let theta = 30 * Math.PI / 180;
        // 四元数公式：（这就表示上面的旋转轴下完成一个弧度的旋转）
        // let _q1 = quat(ux * Math.sin(theta / 2), uy * Math.sin(theta / 2), uz * Math.sin(theta / 2), Math.cos(theta / 2));

        // 用cocoscreator 提供的方法
        // let _q1 = Quat.fromAxisAngle(quat(), v3(ux, uy, uz), theta);

        // 尝试使用 fromAxes
        // let _q1 = Quat.fromAxes(quat(), this.cube1Node.right, this.cube1Node.up, v3(this.cube1Node.forward).multiplyScalar(-1));

        // 获得原始旋转姿态
        // let _q0 = this.cubeNode.getRotation();
        // // 下面的四元数乘法则表示则表示把_q0旋转_q1
        // Quat.multiply(_q0, _q1, _q0);
        // // 把转好的角度赋值回去
        // this.cubeNode.setRotation(_q0);

        // rotateAround
        // Quat.rotateAroundLocal(_q0, this.cubeNode.getRotation(), this.cube1Node.up, 30 * Math.PI / 180);
        // this.cubeNode.setRotation(_q0);

        // rotateTowards
        this.cubeNode.clearSubscriptions();
        let _qstart = this.cubeNode.getRotation();
        Quat.rotateAroundLocal(_q1, this.cubeNode.getRotation(), this.cube1Node.up, 30 * Math.PI / 180);
        EveryFrameScene(1, this.cubeNode).subscribe(_ => {
            // this.cubeNode.getRotation(_q0);
            Quat.rotateTowards(_q0, _qstart, _q1, 0);
            this.log('>>', _q0, _q1)
            this.cubeNode.setRotation(_q1);
        }).addTo(this.cubeNode);

    }

    sliderRefresh() {
        // let q0 = Quat.fromAxisAngle(quat(), Vec3.UNIT_X, -90 * Math.PI / 180);
        // let q1 = Quat.fromAxisAngle(quat(), Vec3.UNIT_Y, -45 * Math.PI / 180);
        // Quat.slerp(_q0, q0, q1, this.slider.progress);
        // this.cubeNode.setRotation(_q0);

        // 初始物体中心坐标
        let v0 = v3(0, .5, 0);
        let q0 = Quat.IDENTITY;

        // 旋转中心点
        let o = v3(0, 0, .5);
        // 旋转中心点到初始物体中心向量
        v0.subtract(o);
        // 把这个向量按照旋转轴旋转90度
        let _quat = Quat.fromAxisAngle(_q0, Vec3.UNIT_X, 90 * Math.PI / 180);
        let v1 = v3();
        Vec3.transformQuat(v1, v0, _quat);

        let v = v3();
        Vec3.slerp(v, v0, v1, this.slider.progress);

        let pos = v3(o).add(v);
        this.cubeNode.setPosition(pos);

        let q1 = Quat.multiply(quat(), _quat, q0);

        Quat.slerp(_q1, q0, q1, this.slider.progress);

        this.cubeNode.setRotation(_q1);

    }
}

